Website Forms Usability: Top 10 Recommendations表單

遵循這些已被廣泛驗證的使用者體驗設計指南可以確保使用者順利完成網站表單填寫。然而，這些簡單的規則往往被忽視或忽略，導致使用者困惑，甚至放棄填寫表單，最終對業務產生負面影響。

根據一項研究，當表單設計符合基本可用性準則時，使用者一次性無錯誤提交的機率會顯著提升，從42%提高到78%。這顯示了遵循這些指南的重要性。

網站表單設計最佳實踐

1. 保持表單簡短

核心原則：刪除不必要的欄位。

透過其他方式推斷資料，或在後續更方便的階段收集。

減少欄位數量會顯著提高表單完成率。案例：一個表單從6個欄位減少到2個欄位後，完成率明顯上升。

2. 視覺分組相關欄位和標籤

建議：標籤應靠近其對應的輸入框。對於移動端和簡短表單，將標籤放在欄位上方；對於較長的桌面表單，將標籤放在欄位旁邊。

不同主題的欄位需分組，並對螢幕閱讀器新增標籤描述。

3. 使用單列布局

原因：多列布局會打斷使用者的垂直填寫流，迫使使用者重新調整視覺焦點。

例外：短而相關的欄位（如城市、州、郵政編碼）可放在同一行。

4. 按邏輯順序排列欄位

示例：信用卡資訊應按以下順序排列：卡號、有效期、安全碼。

快遞選項應按使用頻率排序（如標準配送、2日配送、1日配送）。

5. 避免佔位符文字

問題：佔位符文字可能被使用者忽視，或者在輸入時消失，導致使用者無法回顧內容。

6. 匹配欄位型別和輸入大小

注意：文字框大小應與預期輸入長度匹配。

對於只有2-3個選項的欄位，使用單選按鈕代替下拉選單。

案例：針對城市欄位，99.9%的城市名稱長度為19字元以內，因此設定一個合適長度的輸入框。

7. 區分必填欄位和可選欄位

建議：儘量減少可選欄位數量。

明確標記可選欄位，以避免使用者透過試錯發現哪些欄位是必要的。

8. 解釋輸入或格式要求

關鍵點：明確說明特定的格式或輸入型別要求，例如密碼複雜度、電話號碼格式等。

避免不必要的格式限制，例如強制要求括號或空格。

案例：Netgear 的密碼重置表單僅在錯誤發生後顯示密碼要求，這種做法易讓使用者感到挫敗。

9. 避免重置按鈕

問題：“重置”按鈕的誤點風險遠大於“重新開始”的需求。

對於收集敏感資訊的表單，提供一個“取消”按鈕，但應降低其視覺突出度以避免誤點。

案例：TSA 的投訴表單中“清空表單”按鈕的設計違反了這一原則，且其位置更容易導致誤操作。

10. 提供明確且可見的錯誤提示

建議：錯誤提示應使用多種方式（如紅色文字、重字型和欄位輪廓），確保使用者注意到。

保留使用者輸入的內容，方便使用者修改。

結論：表單可用性並不是一個新話題，已有大量資源詳細分析了不同場景下的表單設計最佳實踐。

行動建議：

定期檢查您的網站表單，避免出現這些常見錯誤。

透過最佳化表單設計，或許能輕鬆實現轉化率的翻倍增長。